<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>08App组件</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="demo">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false
        const School = Vue.extend({
            template:`
            <div>
					<h2>学校名称：{{name}}</h2>	
					<h2>学校地址：{{address}}</h2>	
					<button @click="name+='~'">改学校名</button>
					<button @click="welcome">欢迎你</button>
				</div>`,
            data(){
                return{
                    name:'尚硅谷',
					address:'宏福科技园' 
                }
            },
            methods: {
                welcome(){
					alert(`${this.name}欢迎你！`)
				} 
            },
        })
        const App = Vue.extend({
            components: {School},
            template:`
            <div>
            <School></School>
            </div>`,
        })
        new Vue({
            el: '#demo',
            components: {App},
            template:`<App></App>`
        })
    </script>
</body>

</html>